<script setup>
import "./public/iconfont/iconfont";
import { computed, ref } from "vue";
import searcherCom from "./components/searcherCom.vue";
import bookmarkCom from "./components/bookmarkCom.vue";
import siteShowList from "./components/siteShowList.vue";
import pageSetting from "./components/pageSetting.vue";

import xlsxUtils from './utils/xlsxUtils.js';
console.log(xlsxUtils, 'xlsxUtils');

xlsxUtils.readXLSXFileData('webListexcel')
xlsxUtils.readXLSXFileData()
 
// 设置弹窗
let isOpenSetting = ref(false);
let directionSetting = ref("rtl");

// 背景图片标志
let allBGType = ref("3");
let isShowDrawer = ref(false);
let direction = ref("ltr");
let isOpenBtnlist = ref(true);
if (localStorage.getItem("allbgtype")) {
  allBGType.value = localStorage.getItem("allbgtype");
}
// 获取背景图片
let currentImageUrl = computed(() => {
  return new URL(`./image/bg-${allBGType.value}.png`, import.meta.url).href;
});

function openBtnListFn() {
  console.log(1);
  if (isOpenBtnlist.value) {
    isOpenBtnlist.value = false;
  } else {
    isOpenBtnlist.value = true;
  }
}
function toChangeBackPic() {
  allBGType.value = Math.ceil(Math.random() * 4);
  localStorage.setItem("allbgtype", allBGType.value);
}
function handleClose() {
  isShowDrawer.value = false;
}
</script>
<template>
  <div class="my-tabs-list-wrapper" :style="`background-image:url(${currentImageUrl})`">
    <div class="my-tabs-list-content">
      <div class="my-tabs-list-header" v-if="true"></div>
      <div class="my-tabs-list-content">
        <div class="search-box">
          <searcherCom />
        </div>
        <div class="my-tabs-my-site-list">
          <siteShowList />
        </div>
      </div>
      <!-- <div class="my-tabs-list-footer glass-effect-f"></div> -->
      <!-- <div class="action-btn-open" @click="openBtnListFn"></div> -->
      <ul class="action-btn-list">
        <li class="action-btn-item">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouye" />
          </svg>
        </li>
        <li class="action-btn-item">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zidingyi11" />
          </svg>
        </li>
        <li class="action-btn-item" @click="toChangeBackPic">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tupian1" />
          </svg>
        </li>
        <li class="action-btn-item" @click="() => (isOpenSetting = true)">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shezhi2" />
          </svg>
        </li>
        <li class="action-btn-item" @click="() => (isShowDrawer = true)">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shuqianlantubiao" />
          </svg>
        </li>
      </ul>

      <!-- 设置 -->
      <div class="setting-all">
        <el-drawer
          v-model="isOpenSetting"
          :direction="directionSetting"
          :modal="true"
          size="450"
          class="glass-effect-f drawer-page-setting"
        >
          <div class="page-setting-box">
            <pageSetting />
          </div>
        </el-drawer>
      </div>
      <!-- 背景 -->
      <div class="open-change-bg"></div>
      <div class="my-bookmarks-list">
        <el-drawer
          v-model="isShowDrawer"
          :direction="direction"
          :before-close="handleClose"
          :modal="true"
          size="350"
          class="glass-effect-f drawer-box-border"
        >
          <template #header>
            <div class="bookmarks-title-box">
              <h4 style="color: #fff; font-size: 18px; font-weight: 700">书签栏</h4>
              <div></div>
            </div>
          </template>
          <div class="bookmark-box-content">
            <bookmarkCom />
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@use './style/common.scss';
@use './public/iconfont/iconfont.css';
.drawer-box-border {
  border-left: none;
  border-radius: 0 16px 16px 0;
}
.drawer-page-setting {
  border-right: none;
  border-radius: 16px 0 0 16px;
  // background-color: #fff !important;
}
.setting-all {
  .el-drawer__header {
    display: none;
  }
  .el-drawer__body {
    padding: 0;
  }
}
</style>
<style lang="scss" scoped>
.my-tabs-list-wrapper {
  width: 100vw;
  height: 100vh;
  padding: 30px;
  box-sizing: border-box;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  // 头部
  .my-tabs-list-header {
    height: 40px;
  }
  .my-tabs-list-content {
    position: relative;

    .search-box {
      position: relative;
      z-index: 2;
    }
    .my-tabs-my-site-list {
      margin: 0 auto;
    }
  }

  // 书签栏
  .my-bookmarks-list {
    position: absolute;
    top: 0;
    left: 0;
  }
  .bookmark-box-content {
    height: 100%;
  }
  .open-bookmarks-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 50px;
    line-height: 50px;
  }
  .action-btn-list {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    li {
      list-style: none;
      font-size: 40px;
      margin-right: 25px;
      text-align: center;
      overflow: hidden;
    }
  }
  .action-btn-open {
    position: absolute;
    top: 100px;
    right: 0;
    width: 50px;
    height: 50px;
    font-size: 50px;
    line-height: 50px;
    border-radius: 50%;
    background-color: red;
  }
  .active {
    li {
      &:nth-child(2) {
        transform: translateX(-110%);
      }
      &:nth-child(3) {
        transform: translateX(-220%);
      }
      &:nth-child(4) {
        transform: translateX(-330%);
      }
      &:nth-child(5) {
        transform: translateX(-440%);
      }
    }
  }
}
</style>
